<template>
  <div class="content">
    <header>用户注册</header>

    <!-- 文本框 -->
    <ul class="login-form">
      <li>
        <div class="login-form-left">手机号码：</div>
        <div class="login-form-right">
          <input
            type="text"
            placeholder="手机号码"
            v-model="user.userid"
            @blur="checkrepect()" ref="userid"
          />
        </div>
      </li>
      <li>
        <div class="login-form-left">密码：</div>
        <div class="login-form-right">
          <input type="password" placeholder="密码" v-model="user.password" />
        </div>
      </li>
      <li>
        <div class="login-form-left">确认密码：</div>
        <div class="login-form-right">
          <input
            type="password"
            placeholder="确认密码"
            v-model="user.confirmpw"
          />
        </div>
      </li>
      <li>
        <div class="login-form-left">用户姓名：</div>
        <div class="login-form-right">
          <input type="text" placeholder="用户姓名" v-model="user.username" />
        </div>
      </li>
      <li>
        <div class="login-form-left">性别：</div>
        <div class="login-form-right">
          <input
            type="radio"
            class="radio-sex"
            value="1"
            v-model="user.usersex"
            name="sex"
          />男
          <input
            type="radio"
            class="radio-sex"
            value="0"
            v-model="user.usersex"
            name="sex"
          />女
        </div>
      </li>
    </ul>

    <div class="register-button">
      <button @click="register()">注册</button>
    </div>
    <Footer></Footer>
  </div>
</template>


<script>
import Footer from "../components/Footer";
export default {
  name: "Register",
  components: {
    Footer,
  },
  data() {
    return {
      user: {
        userid: "",
        password: "",
        confirmpw: "",
        username: "",
        usersex: 1,
        
      },
      errmsg: ""
    };
  },
  methods: {
    checkrepect() {
      this.errmsg =""; 
      //手机号格式验证
      if (!/^1[3456789][0-9]{9}$/.test(this.user.userid)) {
        this.errmsg = "手机号码有误，请重填";
      }
      //表单验证
      if (this.user.userid == "") {
        this.errmsg = "手机号码不能为空！";
      }


      if (this.errmsg != "") {
        alert(this.errmsg);
      } else {
        //验证手机号是否重复
        let url = `/LoginController/getUserById/${this.user.userid}`;
        this.$axios
          .get(
            url
          )
          .then((response) => {
            let count = response.data.data;
            if (count > 0) {
              this.errmsg = "手机号重复，请重新输入！";
              alert("手机号重复，请重新输入！");
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    register() {
      if (this.user.username == "") {
        this.errmsg = "用户姓名不能为空！";
      }
      if (this.user.password == "") {
        this.errmsg = "密码不能为空！";
      }

      if (this.errmsg != "") {
        alert(this.errmsg);
      } else {
        let url = `/LoginController/saveUser/${this.user.userid}/${this.user.password}/${this.user.username}/${this.user.usersex}`;
        this.$axios
          .post(
            url
          )
          .then((response) => {
                let count = response.data.data;
                if(count>0){
                    alert("注册成功");
                    this.$router.push({path:'/login',query:{flag:true}});
                }else{
                    alert("注册失败");
                }

          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
  },
  mounted(){
      //当前光标初始化定位到userid输入位置
      this.$refs.userid.focus();
  }
};
</script>


<style scoped>
/* 总容器 */
.content {
  width: 100%;
  height: 100%;
}
/* 头部 */
.content header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  font-size: 4.8vw;
  color: #fff;
  text-align: center;
  line-height: 12vw;
  position: fixed;
  top: 0vw;
  left: 0vw;
  z-index: 999;
}

/* 内容 */
.content .login-form {
  margin-top: 12vw;
}
.content .login-form li {
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content .login-form li .login-form-left {
  flex: 0 0 18vw;
  font-size: 3vw;
  font-weight: 700;
  color: #666;
}
.content .login-form li .login-form-right {
  flex: 1;
  display: flex;
  font-size: 3vw;
}
.content .login-form li .login-form-right input {
  border: none;
  outline: none; /* 表单元素去除焦点选中默认样式 */
  width: 100%;
  height: 4vw;
  font-size: 3vw;
}
.content .login-form li .login-form-right .radio-sex {
  width: 6vw;
  height: 3.2vw;
}
.content .register-button {
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
}
.content .register-button button {
  width: 100%;
  height: 10vw;
  background-color: #38ca73;
  font-size: 3.8vw;
  font-weight: 700;
  border-radius: 4px;
  color: #fff;
  border: none;
  outline: none; /* 表单元素去除焦点选中默认样式 */
}
</style>